<template>
  <div>
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane
        v-for="(item, index) in typeList"
        :label="item.commissionType"
        :key="index"
        :name="String(item.id)"
      >
      </el-tab-pane>
      <!--      仓库装卸-->
      <car-model v-if="['2', '3'].includes(tabsName)"></car-model>
      <!--      上门售后-->
      <afterSalesCommssion
        :valueData="activeName"
        v-if="['7'].includes(tabsName)"
        :afterData="resData"
        v-loading="loading"
        @addStatus="receiveMessage"
      ></afterSalesCommssion>
      <!--      通用提成列表    材料提成/门店卸货提成/仓库拣货提成/门店安装提成/门店拆店提成/门店装货提成-->
      <commonCommission
        v-loading="loading"
        v-if="['1', '4', '8', '9', '10', '11', '13'].includes(tabsName)"
        :commonData="resData"
        :title="title"
        :valueData="activeName"
        @addStatus="receiveMessage"
      ></commonCommission>
      <!--      安装距离补贴-->
      <installDistance
        v-loading="loading"
        :insDisData="resData"
        :valueData="activeName"
        v-if="['5'].includes(tabsName)"
        @addStatus="receiveMessage"
      ></installDistance>
      <!--      新增单提成-->
      <multipleOrder
        v-loading="loading"
        :valueData="activeName"
        :mulOrderData="resData"
        v-if="['6'].includes(tabsName)"
      ></multipleOrder>
      <!--      老带新-->
      <oldPlusNew v-if="tabsName == '12'"></oldPlusNew>
    </el-tabs>
  </div>
</template>

<script>
import carModel from './carModel.vue'
import afterSalesCommssion from './afterSalesCommssion.vue'
import commonCommission from './commonCommission.vue'
import installDistance from './installDistance.vue'
import multipleOrder from './multipleOrder.vue'
import oldPlusNew from './oldPlusNew.vue'

export default {
  name: 'commissionConfiguration',
  components: {
    carModel,
    afterSalesCommssion,
    commonCommission,
    installDistance,
    multipleOrder,
    oldPlusNew,
  },
  data() {
    return {
      typeList: [],
      loading: false,
      activeName: '1',
      tabsName: '',
      title: '',
      resData: {},
    }
  },
  created() {
    this.getType()
  },
  methods: {
    getType() {
      this.$api.commissionGetCommissionTypes().then((res) => {
        this.typeList = res
        this.activeName = res[0].id.toString()
        const data = {
          name: this.activeName,
          label: res[0].commissionType,
        }
        this.handleClick(data)
      })
    },
    async handleClick(tabs) {
      this.title = tabs.label
      this.tabsName = tabs.name
      if (['2', '3'].includes(tabs.name)) return
      this.loading = true
      const res = await this.$api.commissionGetCommissionConfig({
        id: tabs.name,
      })
      this.resData = res
      this.loading = false
    },
    receiveMessage(val) {
      console.log(val)
      if (val == 1) {
        const data = {
          name: this.tabsName,
          label: this.title,
        }
        this.handleClick(data)
      }
    },
  },
}
</script>

<style></style>
